<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			body {
				display: flex;
				justify-content: center;
				align-items: center;
				min-height: 100vh;
				flex-direction: column;
			}

			h2 {
				font-family: Helvetica;
				font-size: 36px;
				margin-top: 40px;
				color: #333;
				opacity: 0;
			}
			
			input[type="checkbox"]{
				width: 100px;
				height: 100px;
			 
			}

			input[type="checkbox"]:checked~h2 {
				animation: .6s title ease-in-out;
				animation-delay: 1.2s;
				animation-fill-mode: forwards;
			}

			.circle {
				stroke-dasharray: 1194;
				stroke-dashoffset: 1194;
			}

			input[type="checkbox"]:checked+svg .circle {
				animation: circle 1s ease-in-out;
				animation-fill-mode: forwards;
			}

			.tick {
				stroke-dasharray: 350;
				stroke-dashoffset: 350;
			}

			input[type="checkbox"]:checked+svg .tick {
				animation: tick .8s ease-out;
				animation-fill-mode: forwards;
				animation-delay: .95s;
			}

			@keyframes circle {
				from {
					stroke-dashoffset: 1194;
				}

				to {
					stroke-dashoffset: 2388;
				}
			}

			@keyframes tick {
				from {
					stroke-dashoffset: 350;
				}

				to {
					stroke-dashoffset: 0;
				}
			}

			@keyframes title {
				from {
					opacity: 0;
				}

				to {
					opacity: 1;
				}
			}
		</style>
		
	</head>
	<body>
		<input type="checkbox" >
		<!-- <label for="check"></label> -->

		<svg width="400" height="400">
			<circle fill="none" stroke="#68E534" stroke-width="20" cx="200" cy="200" r="190" class="circle" stroke-linecap="round"
			 transform="rotate(-90 200 200) " />
			<polyline fill="none" stroke="#68E534" stroke-width="24" points="88,214 173,284 304,138" stroke-linecap="round"
			 stroke-linejoin="round" class="tick" />
		</svg>

		<h2>Cherie Lin</h2>
	</body>
</html>
